<template>
	<view class="page">
		<con-venues :itemChooselist='itemChooselist' :venuelist='venuelist' @confirm="confirm1"></con-venues>
		<view style="position: fixed;z-index: 999;width: 100%;top: 120rpx;">
			<view class="box_11">
				<view class="image-wrapper_7">
					<u-search @search="search" @custom="search" placeholder="搜索" :showAction="false" v-model="keyword">
					</u-search>
				</view>
				<view class="label8_list" @click="openFilter">
					<uni-icons type="settings" size="16"></uni-icons>
					<view class="label_88">
						<text>筛选</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="group_3">
			<view class="item">
				<input type="text" placeholder="手机号" class="atinput" />
			</view>
			<view class="item">
				<input type="text" placeholder="会员姓名" class="atinput" />
			</view>
			<view class="item">
				<input type="text" placeholder="卡名称" disabled v-model="userInfo.occupation_relation"
					@click="showoccupation = true" class="atinput" />
			</view>
			<u-picker :show="showoccupation" :columns="occupation_status" keyName="label" @confirm="addoccupation"
				@cancel="showoccupation = false">
			</u-picker>
			<button bindtap="onClick" class="button_4">
				查询
			</button>
		</view> -->
		<!-- 滚动列表区域 -->
		<scroll-view class="scroll-container" scroll-y>
			<!-- <v-gap color="#EDF5F5" /> -->
			<view class="card-list">
				<view v-for="(item, index) in hylist" :key="index" class="card">
					<!-- 学员基本信息 -->
					<view class="student-info">
						<view class="avatar-wrapper" @click="goToDetail(item)">
							<text class="gender-icon"
								:style="{ '--gender-color': item.xb === '男' ? '#007AFF' : '#FF4D4F' }">{{ item.xb === '男' ? '♂' : '♀' }}</text>
							<image class="avatar" :src="item.head_img" mode="aspectFill" />
						</view>
						<view class="info-right" @click="goToDetail(item)">
							<view class="student-base">
								<view class="base-row">
									<view class="base-group">
										<view class="base-info">
											<text class="name">{{item.student_name}}</text>
											<text class="birthday-tag">{{ item.age }}岁</text>
										</view>
										<view class="phone-row">
											<text class="phone">{{ item.mobile }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="badge-wrap">
							{{ item.area_name || '' }}
							<text class="package-count" style="color: #007AFF"
								@click="showCoursePackages(item)"><text>{{item.package_num}}</text>课包</text>
						</view>
					</view>
					<!-- 课程信息 -->
					<view class="course-info">
						<view class="course-info-grid">
							<!-- <view class="grid-item course-type">
							</view> -->
							<view class="grid-item course-id" style="display: flex;align-items: center;justify-content: space-between;">
								<view class="" style="display: flex;align-items: center;">
									<text class="value course-id-text">{{ item.train_no||'' }}</text>
									<image style="width: 26rpx;height: 26rpx;" @click="copyId(item.train_no)"
										src="https://sass-test.doit10019.com/upload/202504/21105351-38218363892843890.png?attname=fuzhi111.png"
										mode=""></image>
								</view>
								<text class=" course-id-text" style="margin-left: 10rpx;">{{ item.name }}</text>
								<!-- <uni-icons type="copy" :size="16" color="#007AFF" @click="copyContent()" /> -->
							</view>
							<view class="grid-item info-combined" @click="tomember(item, index)">
								<view class="grid-content">
									<view class="coach-info">
										<view class="value class-name-wrap">
											<view class="" style="display: flex;align-items: center;">
												<text class="class-info">{{ item.buy_sku?item.buy_sku :'' }}</text>
												<view class="" style="display: flex;align-items: center;">
													<image class="coach-avatar" :src="item.coach_avatar"
														mode="aspectFill" />
													<text
														class="class-info">{{ item.coach_name?item.coach_name:'' }}</text>
												</view>
											</view>
											<text class="merged-status-tag" style="color: #007AFF;">{{item.status_show||''}}</text>
											<!-- <uni-icons class="class-arrow" type="right" :size="16" color="#007AFF"
												@click="showLessonRecord(item)" /> -->
										</view>
									</view>
									<view class="lesson-info"
										style="display: flex;align-items: center;justify-content: space-between;">
										<view class="status-info">
											<!-- <text class="info-divider">｜</text> -->
											<text class="highlight-expired" style="color: #007AFF;">{{item.cate_name}}</text>
											<text class="highlight-expired" style="color: #007AFF;margin-left: 10rpx;">{{item.class_name||''}}</text>
										</view>
										<!-- <text class="info-divider">｜</text> -->
										<view class="lesson-valid" >
											<text class="value" style="color: #007AFF;">{{item.left_num||''}}次</text>
											<uni-icons class="class-arrow" type="right" :size="16" color="#007AFF"
												@click="showLessonRecord(item)" />
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="enroll-info" @click="showEnrollDetail(item)">
						<scroll-view class="enroll-detail-scroll" scroll-x>
							<view class="enroll-detail-wrap">
								<text class="enroll-detail">报名来源： {{ item.create_at  || '-'}} | {{ item.founder || '-' }}｜{{item.purchase_route_name || '-'}} </text>
								<uni-icons class="view-more" type="eye" :size="14" color="#999999" />
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="" style="width: 100%;height: 120rpx;">

				</view>
			</view>
		</scroll-view>
		<!-- 报名信息 -->
		<u-popup @touchmove.stop :show="enrollDetailPopup" @close="closehomeInfo" closeOnClickOverlay mode="center"
			:safeAreaInsetBottom="false" round="15">
			<scroll-view class="storepopup" style="height: 66vh;padding: 20rpx 20rpx;width: 600rpx;" scroll-y>
				<!-- <view class="title flex-between">
					<text>报名信息</text>
					<u-icon @click="closehomeInfo" name="close-circle-fill" color="#dde3e8" size="18"></u-icon>
				</view> -->
				<view class="enroll-detail-popup">
					<view class="enroll-detail-title">报名信息</view>
					<view class="enroll-detail-content">
						<view class="detail-item">
							<text class="detail-label">招生计划：</text>
							<text class="detail-value">{{ currentEnrollDetail.train_name || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">课程：</text>
							<text class="detail-value">{{ currentEnrollDetail.name || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">课包：</text>
							<text class="detail-value">{{ currentEnrollDetail.buy_sku || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">校区：</text>
							<text class="detail-value">{{ currentEnrollDetail.area_name || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">项目：</text>
							<text class="detail-value">{{ currentEnrollDetail.cate_name || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">教练：</text>
							<text class="detail-value">{{ currentEnrollDetail.coach_name || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">课程规格：</text>
							<text class="detail-value">{{ currentEnrollDetail.train_item_name || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">招生老师：</text>
							<text class="detail-value">{{ currentEnrollDetail.founder || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">报名来源：</text>
							<text class="detail-value">{{ currentEnrollDetail.purchase_route_name || '-'  }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">报名时间：</text>
							<text class="detail-value">{{ currentEnrollDetail.create_at || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">订单人：</text>
							<text class="detail-value">{{ currentEnrollDetail.owner_name || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">学员：</text>
							<text class="detail-value">{{ currentEnrollDetail.student_name|| '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">联系电话：</text>
							<text class="detail-value">{{ currentEnrollDetail.custodian_mobile || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">报名费：</text>
							<text class="detail-value">{{ currentEnrollDetail.order_money || '-' }}元 </text>
							<text class="detail-value"
								style="color: #ff4040;">优惠({{ currentEnrollDetail.preferential_money || '-' }}元) </text>
						</view>
						<view class="detail-item">
							<text class="detail-label">班级：</text>
							<text class="detail-value">{{ currentEnrollDetail.class_name|| '-' }}</text>
						</view>
						<view class="detail-item remark-item">
							<text class="detail-label">备注：</text>
							<text class="detail-value">{{ currentEnrollDetail.remark || '-' }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="enroll-detail-footer">
				<button class="close-btn" @click="closehomeInfo">关闭</button>
			</view>
		</u-popup>

		<u-popup @touchmove.stop :show="showFilterPopup" @close="closehomeInfo1" closeOnClickOverlay mode="right">
			<scroll-view class="filter-content" style="height: 100vh;width: 60vw;" scroll-y>
				<!-- <view class="filter-item">
					<text class="filter-label">校区选择</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view :class="['week-item', selectId1 === index? 'active' : '']"
								v-for="(item,index) in weekList1" :key="index" @click="timesSelect1(item,index)">
								{{item.venue_name}}
							</view>
						</view>
					</view>
				</view>
				<view class="filter-item">
					<text class="filter-label">班型</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view :class="['week-item', selectId6 === index? 'active' : '']"
								v-for="(item,index) in weekList6" :key="index" @click="timesSelect6(item,index)">
								{{item.enum_name}}
							</view>
						</view>
					</view>
				</view> -->
				<view class="filter-item">
					<text class="filter-label">项目</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="['week-item', selectId2 === index? 'active' : '']"
								v-for="(item,index) in weekList2" :key="index" @click="timesSelect2(item,index)">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>

				<!-- 	<view class="filter-item">
					<text class="filter-label">状态</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="['week-item', selectId3 === index? 'active' : '']"
								v-for="(item,index) in weekList3" :key="index" @click="timesSelect3(item,index)">
								{{item}}
							</view>
						</view>
					</view>
				</view> -->
				<!-- <view class="filter-item">
					<text class="filter-label">教练</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="['week-item', selectId4 === index? 'active' : '']"
								v-for="(item,index) in weekList4" :key="index" @click="timesSelect4(item,index)">
								{{item.coach_name}}
							</view>
						</view>
					</view>
				</view> -->
				<!-- <view class="filter-item">
					<text class="filter-label">课程</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="['week-item', selectId5 === index? 'active' : '']"
								v-for="(item,index) in weekList5" :key="index" @click="timesSelect5(item,index)">
								{{item.course_name}}
							</view>
						</view>
					</view>
				</view> -->
			</scroll-view>
		</u-popup>
		<!-- <view class="d-flex flex-row justify-space-between justify-center align-center"
			style="position: fixed;bottom: 0;height: 120rpx;background-color: #fff;width: 100%;padding: 0 8%;z-index: 99;">
			<view class="" @click="plbatch" v-if="plshow"
				style="width: 45%;height: 80rpx;background: #ffffff;color: #ff4040;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;border:#ff4040 1rpx solid">
				批量操作
			</view>
			<view class="" v-if="!plshow" @click="selectAllWeeks"
				style="width: 45%;height: 80rpx;background: #ffffff;color: #ff4040;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;border:#ff4040 1rpx solid">
				重置
			</view>
			<view class=""
				style="width: 45%;height: 80rpx;background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));color: #ffffff;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;">
				添加
			</view>
		</view> -->

		<!-- <button bindtap="onClick" class="button_3">
			保存
		</button> -->
	</view>
	</view>
</template>

<script>
	const venues = require("@/api/venues/venues.js");
	const train = require("@/api/train/index.js");
	export default {
		data() {
			return {
				enrollDetailPopup: false,
				showoccupation: false, //职业
				occupation_status: [], //职业
				occupation_list: [],
				userInfo: {
					occupation_relation: '',
					occupation_relation_id: '',
				},
				shows0: -1,
				filterData: [],
				itemChooselist: {},
				venuelist: [],
				keyword: '',
				listQuery: { //分页
					pageNo: 1,
					pageSize: 6,
				},
				totalPage: '', //几页
				hylist: [],
				currentEnrollDetail: {},
				selectId1: null,
				weekList1: [],
				selectId2: null,
				weekList2: [],
				selectId3: null,
				weekList3: [],
				selectId4: null,
				weekList4: [],
				selectId5: null,
				weekList5: [],
				selectId6: null,
				weekList6: [],
				showFilterPopup: false,
				venue_id: ''
			}
		},
		onLoad() {
			var data = uni.getStorageSync("wqzdy");
			var items = JSON.parse(data)
			this.venuelist = items
			// this.itemChooselist = this.venuelist[0]
			// 处理itemChooselist的逻辑
			if (this.venuelist.length > 0) {
				this.itemChooselist = this.venuelist[0]
				this.venue_id = this.venuelist[0].id
			} else {
				this.itemChooselist = {}; // 或者设置为其他默认值
			}
			this.shuju()
			this.pk_list()
			this.cls_options()
		},
		methods: {
			copyId(train_no) {
				// 获取要复制的文本内容
				let text = train_no;
				// 调用uni.setClipboardData()函数进行复制操作
				uni.setClipboardData({
					data: text.toString(), // 设置要复制的文本内容
					success(res) {
						console.log("成功复制到剪贴板");
					},
					fail(err) {
						console.error("复制失败", err);
					}
				});
			},
			async cls_options() {
				let params = {
					venue_id: this.venue_id,
				};
				let res = await train.cls_options(params);
				if (res.code == 1) {
					this.weekList1 = res.data.areaList
					this.weekList2 = res.data.projectList
					this.weekList3 = res.data.statusList
					this.weekList4 = res.data.coachList
					this.weekList5 = res.data.courseList
					this.weekList6 = res.data.trainEnumList
				}
			},
			timesSelect1(item, index) {
				if (this.selectId1 === index) {
					this.selectId1 = null;
					this.area_id = ''
				} else {
					this.selectId1 = index
					this.area_id = item.id
				}
				this.cls_mange()
			},
			timesSelect2(item, index) {
				if (this.selectId2 === index) {
					this.selectId2 = null;
					this.train_program = ''
				} else {
					this.selectId2 = index
					this.train_program = item.id
				}
				this.cls_mange()
			},
			timesSelect6(item, index) {
				if (this.selectId6 === index) {
					this.selectId6 = null;
					this.train_enum_id = ''
				} else {
					this.selectId6 = index
					this.train_enum_id = item.id
				}
				this.cls_mange()
			},
			timesSelect3(item, index) {
				if (this.selectId3 === index) {
					this.selectId3 = null;
					this.status = ''
				} else {
					this.selectId3 = index
					this.status = index
				}
				this.cls_mange()
			},
			timesSelect4(item, index) {
				if (this.selectId4 === index) {
					this.selectId4 = null;
					this.coach_id = ''
				} else {
					this.selectId4 = index
					this.coach_id = item.id
				}
				this.cls_mange()
			},
			timesSelect5(item, index) {
				if (this.selectId5 === index) {
					this.selectId5 = null;
					this.course_id = ''
				} else {
					this.selectId5 = index
					this.course_id = item.id
				}
				this.cls_mange()
			},
			openFilter() {
				this.showFilterPopup = true;
			},
			closehomeInfo1() {
				this.showFilterPopup = false;
			},
			closehomeInfo() {
				this.enrollDetailPopup = false
			},
			showEnrollDetail(item) {
				this.enrollDetailPopup = true
				this.currentEnrollDetail = item
			},
			async pk_list() {
				let that = this;
				if (this.listQuery.pageNo === 1) that.hylist = [];
				let params = {
					venue_id: this.venue_id,
					keyword: this.keyword,
					pageSize: this.listQuery.pageSize,
					page: this.listQuery.pageNo,
				}
				let res = await venues.pk_list(params)
				if (res.code === 1) {
					that.hylist = that.hylist.concat(res.data.list.data); //将数据拼接在一起
					that.totalPage = res.data.list.last_page
				}
			},
			// 下拉刷新
			onReachBottom() {
				if (this.totalPage <= this.listQuery.pageNo) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1
				this.pk_list()
			},
			search(e) {
				this.listQuery.pageNo = 1
				this.hylist = []
				this.keyword = e
				this.pk_list()
			},
			addstudent() {
				uni.navigateTo({
					url: '../addstudent/index'
				})
			},
			confirm(e) {
				// this.indexArr = e.index;
				// this.valueArr = e.value;

			},
			showsclick(item, index) {
				this.shows0 = index
			},
			tomember(item, index) {
				uni.navigateTo({
					url: '../coursepackagelistdetail/index?id=' + item.id
				})
			},

			shuju() {
				this.occupation_status.push(
					this.occupation_list
				)
			},
			// 职业
			addoccupation(e) {
				this.userInfo.occupation_relation = e.value[0].label
				this.userInfo.occupation_relation_id = e.value[0].id
				this.showoccupation = false
			},
			goToDetail(item) {
				uni.navigateTo({
					url: "./detail?student_id=" + item.student_id
				});
			},

			confirm1(data) {
				this.venue_id = data
				console.log(data, 'data');
				// 直接根据接收到的 id 在 venuelist 中查找对应的场馆对象
				const selectedItem = this.venuelist.find(item => item.id === data);
				if (selectedItem) {
					// 将找到的场馆对象赋值给 itemChooselist
					this.itemChooselist = selectedItem;
				} else {
					console.log(`未找到 id 为 ${data} 的场馆对象`);
				}
				this.pk_list()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		min-height: 100vh;
		background-color: #EDF5F5;
		position: relative;

		.listall {
			margin-bottom: 100rpx;

			.listsee {
				background-color: #fff;
				padding: 20rpx;
				border-radius: 10rpx;
				width: 96%;
				margin-left: 2%;
				border: 2rpx #fff solid;
				margin-bottom: 20rpx;
			}

			.active1 {
				border: 2rpx #0000ff solid;
			}
		}

		.box_11 {
			width: 100%;
			height: 130rpx;
			display: flex;
			flex-direction: row;
			background: #ffffff;
			padding: 0 20rpx;

			// .image-wrapper_7 {
			// 	width: 541rpx;
			// 	height: 60rpx;
			// 	flex-direction: row;
			// 	display: flex;
			// 	margin-top: 15rpx;
			// }
			.image-wrapper_7 {
				position: absolute;
				left: 30rpx;
				top: 30rpx;
				width: 541rpx;
				height: 62rpx;
				flex-direction: row;
				display: flex;
			}

			.label_list {
				display: flex;
				flex-direction: column;
				position: absolute;
				justify-content: center;
				/* 相对父元素水平居中 */
				align-items: center;
				/*  子元素相对父元素垂直居中 */
				right: 90rpx;
				width: 80rpx;
				top: 27rpx;

				.label_7 {
					width: 36rpx;
					height: 36rpx;
				}

				.label_77 {
					width: 60rpx;
					height: 36rpx;
					color: #333333;
					font-size: 26rpx;
					text-align: center;
				}
			}

			.label8_list {
				display: flex;
				flex-direction: column;
				position: absolute;
				justify-content: center;
				/* 相对父元素水平居中 */
				align-items: center;
				/*  子元素相对父元素垂直居中 */
				right: 20rpx;
				width: 80rpx;
				top: 27rpx;

				.label_8 {
					width: 36rpx;
					height: 36rpx;
				}

				.label_88 {
					width: 60rpx;
					height: 36rpx;
					color: #333333;
					font-size: 26rpx;
					text-align: center;
				}
			}
		}

		.group_3 {
			background-color: rgb(255, 255, 255);
			width: 710rpx;
			// height: 100%;
			display: flex;
			flex-direction: column;
			margin: 0 0 0 20rpx;
			position: fixed;
			z-index: 99;
			top: 249rpx;


			.item {
				// padding: 29rpx 30rpx 30rpx;
				padding: 20rpx 30rpx 20rpx 30rpx;

				.atinput {
					// border: #EBECEE 1rpx solid;
					font-size: 24rpx;
					height: 60rpx;
					width: 650rpx;
					padding-left: 20rpx;
				}

				.item-title {
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					font-weight: 500;
					margin-bottom: 20rpx;
				}

				.value {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 500;
				}

				.time-cell {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 500;
					justify-content: flex-start;

					.time {
						width: 49%;

						&:last-of-type {
							margin-left: 20rpx;
						}
					}
				}

				.week-list {
					display: grid;
					grid-template-columns: repeat(5, 1fr);
					grid-gap: 20rpx;
					position: relative;

					.week-item {
						padding: 15rpx 0;
						background-color: rgb(243, 243, 243);
						border-radius: 5rpx;
						text-align: center;
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						font-weight: 500;
						border: solid 2rpx transparent;
						box-sizing: border-box;
					}

					.active {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;

						// &:before {
						// 	display: block;
						// 	content: '';
						// 	position: absolute;
						// 	width: 27rpx;
						// 	height: 28rpx;
						// 	right: -2rpx;
						// 	bottom: -2rpx;
						// 	background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/46b1cc85fcb0fd76095daf823b7d2bb4a3235519.png");
						// 	background-repeat: no-repeat;
						// 	background-size: 100%;
						// }
					}

					.active1 {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;
					}

					.active2 {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;
					}

					.check {
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						position: absolute;
						bottom: 10rpx;
						right: 0;
					}
				}
			}
		}

		.text_2 {
			width: 93rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 15rpx 0 0 21rpx;
		}

		.section_2 {
			background-color: rgba(229, 229, 229, 1.000000);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_3 {
			width: 47rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 42rpx 0 0 19rpx;
		}

		.text_4 {
			width: 82rpx;
			height: 26rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 24rpx 0 0 20rpx;
		}

		.section_3 {
			background-color: rgba(229, 229, 229, 1.000000);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_5 {
			width: 47rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 39rpx 0 0 19rpx;
		}

		.text_6 {
			width: 82rpx;
			height: 26rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 24rpx 0 0 20rpx;
		}

		.section_4 {
			background-color: rgba(229, 229, 229, 1.000000);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_7 {
			width: 95rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 39rpx 0 0 19rpx;
		}

		.image_2 {
			width: 151rpx;
			height: 151rpx;
			margin: 25rpx 0 0 18rpx;
		}


		.text_8 {
			width: 95rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 20rpx 0 0 19rpx;
		}

		.section_6 {
			width: 378rpx;
			height: 62rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			margin: 26rpx 0 27rpx 21rpx;
		}

		.button_1 {
			background-color: rgba(243, 243, 243, 1.000000);
			height: 62rpx;
			display: flex;
			flex-direction: column;
			width: 174rpx;
		}

		.text_9 {
			width: 48rpx;
			height: 24rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 19rpx 0 0 63rpx;
		}

		.button_2 {
			background-color: rgba(255, 65, 5, 0.100000);
			height: 62rpx;
			display: flex;
			flex-direction: column;
			width: 174rpx;
		}

		.text_10 {
			width: 73rpx;
			height: 24rpx;
			overflow-wrap: break-word;
			color: rgba(255, 98, 0, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 19rpx 0 0 51rpx;
		}

		.button_4 {
			width: 90%;
			height: 70rpx;
			background: #3dabff;
			border-radius: 10rpx;
			margin-left: 5%;
			color: #fff;
			font-size: 28rpx;
			z-index: 999;
			line-height: 70rpx;
			margin-bottom: 20rpx;
		}

		.button_3 {
			width: 90%;
			height: 80rpx;
			position: fixed;
			bottom: 20rpx;
			background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));
			border-radius: 80rpx 80rpx;
			margin-left: 5%;
			color: #fff;
			font-size: 28rpx;
			z-index: 999;
		}

		.box_20 {
			background-color: rgba(0, 0, 0, 1);
			border-radius: 10rpx;
			position: absolute;
			width: 165rpx;
			height: 105rpx;
			flex-direction: row;
			display: flex;
			right: 35rpx;
			top: 100rpx;
			z-index: 998;

			.image-text_4 {
				width: 34rpx;
				height: 62rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin: 20rpx 0 0 28rpx;
			}

			.icon_5 {
				width: 30rpx;
				height: 30rpx;
				margin-left: 2rpx;
			}

			.text-group_4 {
				width: 34rpx;
				height: 18rpx;
				overflow-wrap: break-word;
				color: rgba(255, 255, 255, 1);
				font-size: 18rpx;
				font-family: PingFang-SC-Medium;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
				line-height: 24rpx;
				margin-top: 14rpx;
			}

			.image-text_5 {
				width: 36rpx;
				height: 65rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin: 17rpx 0 0 37rpx;
			}

			.icon_67 {
				width: 32rpx;
				height: 32rpx;
				margin-left: 2rpx;
			}

			.text-group_5 {
				width: 36rpx;
				height: 18rpx;
				overflow-wrap: break-word;
				color: rgba(255, 255, 255, 1);
				font-size: 18rpx;
				font-family: PingFang-SC-Medium;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
				line-height: 24rpx;
				margin-top: 15rpx;
			}

			.image-text_6 {
				width: 36rpx;
				height: 65rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin: 18rpx 0 0 37rpx;
			}

			.icon_7 {
				width: 32rpx;
				height: 32rpx;
				margin-left: 2rpx;
			}

			.text-group_6 {
				width: 36rpx;
				height: 18rpx;
				overflow-wrap: break-word;
				color: rgba(255, 255, 255, 1);
				font-size: 18rpx;
				font-family: PingFang-SC-Medium;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
				line-height: 24rpx;
				margin-top: 15rpx;
			}

			.image_4 {
				position: absolute;
				left: 125rpx;
				top: -13rpx;
				width: 28rpx;
				height: 14rpx;
			}
		}

		.scroll-container {
			flex: 1;
			overflow: auto;
			margin-top: 80rpx;

			.card-list {
				// padding: 20rpx;
			}

			.card {
				background-color: #ffffff;
				border-radius: 12rpx;
				// margin-bottom: 20rpx;
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
				transform: scale(0.95);
			}

			.student-info {
				display: flex;
				align-items: center;
				padding: 16rpx 24rpx;
				position: relative;
			}

			.avatar-wrapper {
				position: relative;
			}

			.gender-icon {
				position: absolute;
				top: -4rpx;
				left: -4rpx;
				background: #fff;
				border-radius: 50%;
				width: 12px;
				height: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
				z-index: 1;
				font-size: 8px;
				color: var(--gender-color);
			}

			.avatar {
				width: 56rpx;
				height: 56rpx;
				border-radius: 28rpx;
				position: relative;
			}

			.info-right {
				margin-left: 20rpx;
				flex: 1;
			}

			.name-status {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
			}

			.student-base {
				flex: 1;
			}

			.base-row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 8rpx;
			}

			.base-row:last-child {
				margin-bottom: 0;
			}

			.course-campus {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 8rpx;
			}

			.course-info-text {
				font-size: 13px;
				color: #666666;
			}

			.course-campus {
				margin-bottom: 8rpx;
			}

			.course-status {
				margin-bottom: 8rpx;
			}

			.merged-status-tag {
				font-size: 12px;
				color: #333333;
				background-color: #F5F5F5;
				padding: 4rpx 12rpx;
				border-radius: 4px;
				display: inline-block;
			}

			.status-tag {
				font-size: 12px;
				color: #007AFF;
				background-color: #E6F4FF;
				padding: 4rpx 12rpx;
				border-radius: 4px;
			}

			.birthday-tag {
				font-size: 11px;
				color: #666666;
				background-color: #f5f5f5;
				padding: 2rpx 6rpx;
				border-radius: 4px;
				margin-right: 8rpx;
			}

			.name {
				font-size: 14px;
				font-weight: 500;
				color: #333333;
			}

			.phone {
				font-size: 11px;
				color: #999999;
				margin: 0 8rpx;
			}

			.base-info {
				display: flex;
				align-items: center;
				gap: 12rpx;
				margin-top: 4rpx;
			}

			.campus,
			.valid-until {
				font-size: 14px;
				color: #999999;

				&.expired {
					color: #ff4d4f;
				}
			}

			.course-type-tag {
				font-size: 12px;
				color: #007AFF;
				background-color: #e6f3ff;
				padding: 4rpx 12rpx;
				border-radius: 4px;
			}

			.badge-wrap {
				display: flex;
				align-items: center;
				flex-direction: column;
				gap: 8rpx;
				font-size: 24rpx;
			}

			.package-count {
				font-size: 12px;
				color: #999999;
				padding: 4rpx 12rpx;
				background-color: #E6F4FF;
				border-radius: 4px;
			}

			.arrow-icon {
				color: #cccccc;
			}

			.course-info {
				padding: 12rpx 24rpx;
				border-bottom: 1px solid #f0f0f0;
				position: relative;
			}

			.timing-tag {
				display: inline-block;
				font-size: 12px;
				padding: 4rpx 16rpx;
				border-radius: 4px;
				background-color: #e6f3ff;
				color: #007AFF;
			}

			.course-info-grid {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				// gap: 16rpx;
			}

			.course-type {
				grid-column: span 2;
				background-color: #f0f7ff;
				margin-bottom: 0;
			}

			.course-class {
				grid-column: span 2;
			}

			.course-info-header {
				display: flex;
				align-items: center;
				gap: 16rpx;
				width: 100%;
			}

			.course-name {
				color: #007AFF;
				font-weight: 500;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				flex: 1;
				margin-right: 20rpx;
			}

			.campus-name {
				color: #007AFF;
				font-weight: 500;
				font-size: 12px;
				text-align: right;
				flex-shrink: 0;
			}

			.course-id {
				grid-column: span 2;
				background-color: #f0f7ff;
				margin-top: -16rpx;
			}

			.course-id-text {
				color: #666666;
				font-size: 12px;
				margin-right: 8rpx;
			}

			.course-id-wrap {
				display: flex;
				align-items: center;
				gap: 12rpx;
				flex: 1;
			}

			.copy-icon {
				padding: 8rpx;
			}

			.grid-item {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 6rpx;
				padding: 8rpx;
				background-color: #f8f9fa;
				border-radius: 8rpx;
				position: relative;
			}

			.info-combined {
				grid-column: span 2;
			}

			.grid-content {
				display: flex;
				flex-direction: column;
				width: 100%;
			}

			.lesson-info {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				font-size: 14px;
				color: #666666;
			}

			.lesson-remaining,
			.lesson-valid {
				display: flex;
				align-items: center;
				flex-shrink: 0;
				font-size: 12px;
			}

			.status-info {
				display: flex;
				align-items: center;
				gap: 12rpx;
			}

			.info-divider {
				margin: 0 20rpx;
				color: #cccccc;
				flex-shrink: 0;
			}

			.coach-info {
				display: flex;
				align-items: center;
				gap: 12rpx;
				width: 100%;
			}

			.coach-avatar {
				width: 40rpx;
				height: 40rpx;
				border-radius: 20rpx;
				flex-shrink: 0;
			}

			.class-name-wrap {
				min-width: 0;
			}

			.class-info {
				max-width: 100%;
			}

			.divider {
				margin: 0 8rpx;
				color: #cccccc;
			}

			.highlight {
				color: #666666;
				font-size: 12px;
				margin-right: 12rpx;
			}

			.grid-label {
				font-size: 12px;
				color: #999999;
			}

			.value {
				color: #333333;
				font-size: 12px;
				flex: 1;
			}

			.class-name-wrap {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.class-info {
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.class-arrow {
				flex-shrink: 0;
			}

			.enroll-info {
				padding: 12rpx 24rpx;
				background-color: #fafafa;
				border-radius: 0 0 12rpx 12rpx;
			}



			.enroll-detail-scroll {
				width: 100%;
				white-space: nowrap;
			}

			.enroll-detail-wrap {
				display: flex;
				align-items: center;
			}

			.enroll-detail {
				color: #999999;
				font-size: 12px;
				line-height: 1.4;
				display: inline-block;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				flex: 1;
			}

			.view-more {
				flex-shrink: 0;
				margin-left: 8rpx;
			}

			.highlight {
				color: #007AFF;
				font-weight: 500;
			}

			.highlight-expired {
				color: #999999;
				font-size: 12px;
				font-weight: normal;
			}

			.status-tag {
				font-size: 12px;
				padding: 4rpx 12rpx;
				border-radius: 4px;
			}
		}

		.storepopup {
			.enroll-detail-popup {
				// width: 600rpx;
				// background: #ffffff;
				// border-radius: 16rpx;
				overflow: hidden;
			}

			.enroll-detail-title {
				font-size: 16px;
				color: #333333;
				font-weight: 500;
				text-align: center;
				padding: 30rpx 30rpx 10rpx 30rpx;
				border-bottom: 1px solid #f0f0f0;
			}

			.enroll-detail-content {
				padding: 20rpx 10rpx 10rpx 20rpx;
				max-height: 820rpx;
				overflow-y: auto;
			}

			.detail-item {
				display: flex;
				align-items: flex-start;
				margin-bottom: 10rpx;
				line-height: 1.5;
			}

			.detail-item:last-child {
				margin-bottom: 0;
			}

			.detail-label {
				width: 170rpx;
				flex-shrink: 0;
				color: #999999;
				font-size: 14px;
			}

			.detail-value {
				flex: 1;
				color: #333333;
				font-size: 14px;
			}

			.remark-item {
				align-items: flex-start;
			}

			.remark-item .detail-value {
				word-break: break-all;
			}
		}

		.enroll-detail-footer {
			padding: 20rpx 30rpx;
			border-top: 1px solid #f0f0f0;
		}

		.close-btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #007AFF;
			color: #ffffff;
			font-size: 16px;
			border-radius: 8rpx;
			border: none;
		}
	}

	.filter-content {
		background-color: #ffffff;
		padding: 20rpx 10rpx 20rpx 20rpx;
		border-radius: 32rpx 32rpx 0 0;

		.filter-item {
			margin-bottom: 24rpx;
		}

		.item {
			// padding: 29rpx 30rpx 30rpx;
			padding: 0 20rpx 20rpx 20rpx;

			.atinput {
				// border: #EBECEE 1rpx solid;
				font-size: 24rpx;
				height: 60rpx;
				width: 600rpx;
				padding-left: 20rpx;
			}

			.item-title {
				color: rgb(153, 153, 153);
				font-size: 28rpx;
				font-weight: 500;
				margin-bottom: 20rpx;
			}

			.value {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				font-weight: 500;
			}

			.time-cell {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				font-weight: 500;
				justify-content: flex-start;

				.time {
					width: 49%;

					&:last-of-type {
						margin-left: 20rpx;
					}
				}
			}

			.week-list {
				flex-direction: row;
				width: 100%;
				font-size: 24rpx;
				flex-wrap: wrap;
				display: flex;

				.week-item {
					padding: 15rpx 0;
					background-color: rgb(243, 243, 243);
					border-radius: 5rpx;
					text-align: center;
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					font-weight: 500;
					border: solid 2rpx transparent;
					box-sizing: border-box;
					padding: 6rpx 12rpx;
					margin-top: 20rpx;
					margin-right: 20rpx;
				}

				.active {
					color: rgba(255, 98, 0, 1);
					background-color: rgba(255, 65, 5, 0.1);
					// border: solid 2rpx rgb(99, 93, 247);
					position: relative;
				}

				.active1 {
					color: rgba(255, 98, 0, 1);
					background-color: rgba(255, 65, 5, 0.1);
					// border: solid 2rpx rgb(99, 93, 247);
					position: relative;
				}

				.active2 {
					color: rgba(255, 98, 0, 1);
					background-color: rgba(255, 65, 5, 0.1);
					// border: solid 2rpx rgb(99, 93, 247);
					position: relative;
				}

				.check {
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					position: absolute;
					bottom: 10rpx;
					right: 0;
				}
			}
		}

		.filter-label {
			font-size: 28rpx;
			color: #666666;
			margin-bottom: 16rpx;
			display: block;
		}

		.view-type {
			display: flex;
			gap: 16rpx;
		}

		.detail-content {
			background-color: #ffffff;
			border-radius: 32rpx 32rpx 0 0;
			padding: 32rpx;
			max-height: 80vh;
		}

		.detail-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 32rpx;
		}

		.detail-title {
			font-size: 32rpx;
			font-weight: 500;
		}

		.tab-content {
			margin-top: 32rpx;
		}

		.schedule-item,
		.student-item,
		.record-item {
			display: flex;
			justify-content: space-between;
			padding: 24rpx 0;
			border-bottom: 2rpx solid #f0f0f0;
		}

		.schedule-time,
		.student-info,
		.record-info {
			display: flex;
			flex-direction: column;
		}

		.date {
			font-size: 28rpx;
		}

		.time {
			font-size: 24rpx;
			color: #999999;
			margin-top: 8rpx;
		}

		.schedule-status {
			display: flex;
			align-items: center;
			gap: 16rpx;
		}

		.attendees {
			font-size: 24rpx;
			color: #999999;
		}

		.student-avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 40rpx;
		}

		.student-detail,
		.record-detail {
			margin-left: 16rpx;
		}

		.student-name {
			font-size: 28rpx;
			font-weight: 500;
		}

		.student-phone,
		.record-time {
			font-size: 24rpx;
			color: #999999;
			margin-top: 8rpx;
		}

		.student-hours {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			font-size: 24rpx;
			color: #666666;
			gap: 8rpx;
		}

		.record-hours {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
		}

		.record-hours .course-name {
			font-size: 28rpx;
			font-weight: 500;
		}

		.record-hours .hours {
			font-size: 24rpx;
			color: #2979ff;
			margin-top: 8rpx;
		}

		.record-summary {
			text-align: right;
			padding: 24rpx 0;
			font-size: 28rpx;
			color: #666666;
		}
	}
</style>